<!--
 * @Description: 消息通知
 * @FilePath: /lieshou-app/pages/my/msg_notification.vue
-->

<template>
	<view class="content">
		<z-paging ref="paging" safe-area-inset-bottom="true">
			<view slot="top">
				<zNav title="消息通知" :showBack="true"></zNav>
			</view>
			<view class="user-info">
				<view class="head-icon">
					<image class="icon" src="@/static/image/my/btn-bg-icon.png"></image>
				</view>
				<view class="user">
					<view class="user-top">
						<text class="title">竹子君</text>
						<!-- <image class="icon" src="@/static/image/my/btn-bg-icon.png"></image> -->
					</view>
					<view class="user-score">
						<text class="score">学分：165分</text>
						<view class="label">
							<image class="icon" src="@/static/image/my/crown-icon.png"></image>
							<text class="txt">三年级</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 列表信息 -->
			<view class="msg-type" v-for="(type, idx) in ['未读消息', '已读消息']">
				<view class="msg-title">
					<view class="bg"></view>
					<view class="title">{{ type }}</view>
				</view>

				<view class="card" v-for="(item, index) in dataList" :key="index">
					<!-- top -->
					<view class="title">
						<text class="title-left">{{ item.title }}</text>
						<text class="title-right">{{ item.time }}</text>
					</view>

					<!-- 间隔 -->
					<view class="inter"></view>

					<view class="info">
						<text class="desc">{{ item.desc }}</text>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
import zNav from '@/components/z-nav.vue';
export default {
	components: {
		zNav,
	},
	data() {
		return {
			dataList: [
				{
					title: '课程视听权益即将到期通知',
					desc: '您购买的《28天高情商聊天改造班》由于未提交作业，课程的视听权益即将在7天后到期，请尽快提交作业，提交后将可以将视听权益升级为不限视听次数。',
					chapter: '第一章·第1节 社交软件拓展联系人',
					progress: 44,
					time: '2024-08-10',
					currentTime: '01:56:00',
					totalTime: '03:15:00',
					status: ['已学完', '已提交作业', '已解锁奖励'],
					canSubmit: false,
					question: 'Q：说说你最近在线上软件拓展有效联系人的方法',
					ask: 'A：① 用F5（窗口期）方法，提升到课率，达到了47%的到课率（到课/浏览*100%）具体方法：海报上写特邀xx老师亲授xx，免费讲xx内容，补充信息：有个前提，在私域中一直有建设这个老师的人设，让用户觉得老师的课程干货很多② 用D3（特别关注）方法，提升到课率，达到63%的到课率（到课/触达*100%）,具体方法：API对接AI，把用户的私域标签（需求、偏好）给AI，编写个性化话术群发。③ 用A3（限时升级权益）方法，提升完课率，达到24%完课率A：① 用F5（窗口期）方法，提升到课率，达到了47%的到课率（到课/浏览*100%）具体方法：海报上写特邀xx老师亲授xx，免费讲xx内容，补充信息：有个前提，在私域中一直有建设这个老师的人设，让用户觉得老师的课程干货很多② 用D3（特别关注）方法，提升到课率，达到63%的到课率（到课/触达*100%）,具体方法：API对接AI，把用户的私域标签（需求、偏好）给AI，编写个性化话术群发。③ 用A3（限时升级权益）方法，提升完课率，达到24%完课率...',
				},
				{
					title: '课程视听权益即将到期通知',
					desc: '您购买的《28天高情商聊天改造班》由于未提交作业，课程的视听权益即将在7天后到期，请尽快提交作业，提交后将可以将视听权益升级为不限视听次数。',
					chapter: '第一章·第1节 社交软件拓展联系人',
					progress: 100,
					time: '2024-08-10',
					currentTime: '03:15:00',
					totalTime: '03:15:00',
					status: [1, 0, 0],
					canSubmit: true,
					question: 'Q：说说你最近在线上软件拓展有效联系人的方法',
					ask: 'A：① 用F5（窗口期）方法，提升到课率，达到了47%的到课率（到课/浏览*100%）具体方法：海报上写特邀xx老师亲授xx，免费讲xx内容，补充信息：有个前提，在私域中一直有建设这个老师的人设，让用户觉得老师的课程干货很多② 用D3（特别关注）方法，提升到课率，达到63%的到课率（到课/触达*100%）,具体方法：API对接AI，把用户的私域标签（需求、偏好）给AI，编写个性化话术群发。③ 用A3（限时升级权益）方法，提升完课率，达到24%完课率A：① 用F5（窗口期）方法，提升到课率，达到了47%的到课率（到课/浏览*100%）具体方法：海报上写特邀xx老师亲授xx，免费讲xx内容，补充信息：有个前提，在私域中一直有建设这个老师的人设，让用户觉得老师的课程干货很多② 用D3（特别关注）方法，提升到课率，达到63%的到课率（到课/触达*100%）,具体方法：API对接AI，把用户的私域标签（需求、偏好）给AI，编写个性化话术群发。③ 用A3（限时升级权益）方法，提升完课率，达到24%完课率...',
				},
				{
					title: '课程视听权益即将到期通知',
					desc: '您购买的《28天高情商聊天改造班》由于未提交作业，课程的视听权益即将在7天后到期，请尽快提交作业，提交后将可以将视听权益升级为不限视听次数。',
					chapter: '第一章·第1节 社交软件拓展联系人',
					progress: 100,
					time: '2024-08-10',
					currentTime: '03:15:00',
					totalTime: '03:15:00',
					status: ['已学完', '已提交作业', '已解锁奖励'],
					canSubmit: true,
					question: 'Q：说说你最近在线上软件拓展有效联系人的方法',
					ask: 'A：① 用F5（窗口期）方法，提升到课率，达到了47%的到课率（到课/浏览*100%）具体方法：海报上写特邀xx老师亲授xx，免费讲xx内容，补充信息：有个前提，在私域中一直有建设这个老师的人设，让用户觉得老师的课程干货很多② 用D3（特别关注）方法，提升到课率，达到63%的到课率（到课/触达*100%）,具体方法：API对接AI，把用户的私域标签（需求、偏好）给AI，编写个性化话术群发。③ 用A3（限时升级权益）方法，提升完课率，达到24%完课率A：① 用F5（窗口期）方法，提升到课率，达到了47%的到课率（到课/浏览*100%）具体方法：海报上写特邀xx老师亲授xx，免费讲xx内容，补充信息：有个前提，在私域中一直有建设这个老师的人设，让用户觉得老师的课程干货很多② 用D3（特别关注）方法，提升到课率，达到63%的到课率（到课/触达*100%）,具体方法：API对接AI，把用户的私域标签（需求、偏好）给AI，编写个性化话术群发。③ 用A3（限时升级权益）方法，提升完课率，达到24%完课率...',
				},
			],
		};
	},
	async onLoad() {
		let userInfo = await this.$utils.getStorage('userInfo');
		if (userInfo) {
			this.userInfo = userInfo;
			this.$utils.showLog('获取用户信息我的学籍-页面', userInfo);
		}
	},
	methods: {},
};
</script>

<style lang="scss">
page {
	background-image: url('https://1257557568.vod-qcloud.com/d34b21d5vodcq1257557568/7b1391ad1397757896686948962/ERawiiRPGZkA.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.content {
	width: 100%;
	height: 100%;

	.user-info {
		width: 694rpx;
		margin: 0 auto;
		display: flex;
		padding: 16rpx 26rpx;
		box-sizing: border-box;
		border-radius: 14rpx;
		background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 0.3);
		border: 2rpx solid rgba(255, 255, 255, 1);

		.head-icon {
			width: 126rpx;
			height: 126rpx;
			border-radius: 50%;
			overflow: hidden;
			margin-right: 24rpx;

			.icon {
				width: 100%;
				height: 100%;
			}
		}

		.user {
			flex: 1;

			.user-top {
				.title {
					font-size: 40rpx;
					font-weight: 700;
					color: rgba(0, 0, 0, 1);
					line-height: 56rpx;
				}

				.icon {
					width: 40rpx;
					height: 56rpx;
				}
			}

			.user-score {
				display: flex;
				margin-top: 14rpx;
				height: 44rpx;
				align-items: center;

				.score {
					font-size: 28rpx;
					line-height: 38rpx;
					color: rgba(0, 0, 0, 1);
					margin-right: 20rpx;
				}

				.label {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 136rpx;
					height: 44rpx;
					border-radius: 20rpx;
					// padding-left: 10rpx;
					background: linear-gradient(93.89deg, rgba(255, 232, 158, 1) 0%, rgba(241, 218, 167, 1) 100%);

					.icon {
						width: 28rpx;
						height: 28rpx;
						margin-right: 14rpx;
					}

					.txt {
						font-size: 20rpx;
						color: rgba(51, 51, 51, 1);
					}
				}
			}
		}
	}

	.msg-type {
		width: 694rpx;
		margin: 60rpx auto 0;
		.msg-title {
			width: 100%;
			height: 62rpx;
			display: flex;
			align-items: center;
			.bg {
				width: 62rpx;
				height: 62rpx;
				border-radius: 50%;
				overflow: hidden;
				background: linear-gradient(128.84deg, rgba(253, 145, 200, 1) 0%, rgba(255, 255, 255, 0) 100%);
				filter: blur(10px);
			}
			.title {
				font-size: 28rpx;
				font-weight: 500;
				line-height: 40rpx;
				color: rgba(0, 0, 0, 1);
				margin-left: -30rpx;
			}
		}
	}

	.card {
		background-color: #fff;
		border-radius: 20rpx;
		margin: 0px 0rpx 20rpx;
		padding: 22rpx 26rpx 30rpx;
		box-shadow: 4rpx 4rpx 8rpx rgba(0, 0, 0, 0.25);

		&:first-of-type {
			margin-top: 16rpx;
		}

		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 42rpx;

			&-left {
				font-size: 24rpx;
				color: rgba(43, 43, 43, 1);
			}

			&-right {
				font-size: 20rpx;
				color: rgba(0, 0, 0, 1);
			}
		}

		.info {
			margin-top: 14rpx;
			text-align: justify;
			.desc {
				color: rgba(43, 43, 43, 1);
				font-size: 20rpx;
				line-height: 28rpx;
			}
		}

		.inter {
			width: 652rpx;
			height: 2rpx;
			background-color: rgba(235, 235, 235, 1);
			margin: 12rpx auto 16rpx;
		}
	}
}
</style>
